<template>
  <div>
    <ZgDialog width="60%" v-model="visible" :title="dialogTitle" @ok="onOk">
      <div class="flx-b content">
        <div class="width100">
          <ZgInput placeholder="请输入关键字" v-model="searchForm.searchStr" @enter="search" />
          <h3 class="mt10">{{ title }}</h3>
          <a-breadcrumb separator=">" >
            <a-breadcrumb-item v-for="(item,index) in breadCrumbArr" :key="index" ><span @click="breadChoose(item,index)">{{ item.name }}</span></a-breadcrumb-item>
          </a-breadcrumb>
          <ul>
            <li v-show="isShowAllChoose">
              <span>
                <a-checkbox :indeterminate="indeterminate" :checked="allChecked" @change="changeAllChecked">
                  全选
                </a-checkbox>
              </span>
            </li>
            <template v-for="(item,index) in list" >
              <li v-if="item.isOrg" :key="index">
                <span @click="next(item)">
                  <ZgCheckbox :disabled="item.disabled"></ZgCheckbox>
                  <svg
                    t="1750385805808"
                    class="icon mrg10"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4555"
                    width="32"
                    height="32"><path d="M905.0112 681.728h-41.9328v-101.0176A74.5984 74.5984 0 0 0 788.48 506.1632h-233.984v-71.68h72.96a66.048 66.048 0 0 0 66.048-66.0992V169.8816a65.9968 65.9968 0 0 0-66.048-66.048H399.36a66.048 66.048 0 0 0-66.0992 66.048v198.2976A66.0992 66.0992 0 0 0 399.36 434.2784h83.8656v71.68H229.9392a74.5984 74.5984 0 0 0-74.5472 74.5472v101.0176H121.344a51.2 51.2 0 0 0-51.2 51.2v135.6288a51.2 51.2 0 0 0 51.2 51.2h156.8768a51.2 51.2 0 0 0 51.2-51.2v-135.4752a51.2 51.2 0 0 0-51.2-51.2H226.6624v-100.9664a3.2768 3.2768 0 0 1 3.2768-3.2768h253.2864v104.2944H435.2a51.2 51.2 0 0 0-51.2 51.2v135.424a51.2 51.2 0 0 0 51.2 51.2h156.672a51.2 51.2 0 0 0 51.2-51.2v-135.4752a51.2 51.2 0 0 0-51.2-51.2h-37.376v-104.2432H788.48a3.2768 3.2768 0 0 1 3.2768 3.2768v101.0176h-43.7248a51.2 51.2 0 0 0-51.2 51.2v135.424a51.2 51.2 0 0 0 51.2 51.2h156.8768a51.2 51.2 0 0 0 51.2-51.2v-135.4752a51.2 51.2 0 0 0-51.0976-51.1488z" fill="#59ADF8" p-id="4556"></path></svg>
                  <span>{{ item.name }}<em v-if="item.childCount>0">({{ item.childCount }})</em></span>
                </span>
                <span v-if="item.childCount>0" @click="next(item)">
                  <a-divider type="vertical" />
                  <i>下级</i>
                </span>
              </li>
              <li v-if="!item.isOrg" class="personnel" :key="index">
                <span>
                  <ZgCheckbox :modelVal="item.isChecked" @change="v => chooseSingle(item,v)"></ZgCheckbox>
                  <svg
                    t="1750387781688"
                    class="icon mrg10"
                    viewBox="0 0 1036 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6248"
                    width="32"
                    height="32"><path d="M231.633593 295.165243c0-153.595317 124.940454-278.535771 278.537807-278.535771 153.595317 0 278.535771 124.940454 278.535771 278.535771 0 153.60448-124.940454 278.53068-278.535771 278.53068C356.574047 573.695923 231.633593 448.769723 231.633593 295.165243L231.633593 295.165243zM0 1014.090329c5.996914-67.351756 38.330358-306.001432 286.846943-433.813074 61.63687 48.382571 139.069346 77.514946 223.325474 77.514946 84.715315 0 162.56727-29.428658 224.36908-78.30605 249.591753 127.274058 279.721917 364.250911 285.801301 434.597051C1018.86037 1015.51676 1.473266 1014.201308 0 1014.090329L0 1014.090329zM0 1014.090329" fill="#59ADF8" p-id="6249"></path></svg>
                  <span>
                    {{ item.name }}
                  </span>
                </span>
              </li>
            </template>

          </ul>
        </div>
        <div class="divider"></div>
        <div class="width100">
          <div>已选择（{{ chooseform.selected.length }}）</div>
          <ul class="selected-list">
            <span class="mr10" v-for="(item,index) in chooseform.selected" :key="index" @click="delChoose(item)">
              <i>{{ item.name }}</i><i class="fa fa-close"></i>
            </span>
          </ul>
        </div>
      </div>

    </ZgDialog>
  </div>
</template>

<script>

export default {
  props: {
    dialogTitle: {
      type: String,
      default: '选择人员'
    },
    title: {
      type: String,
      default: '焦煤交易中心'
    },
    selceted: {
      type: Array,
      default: () => {
        return []
      }
    },
    isRequired: {
      type: Boolean,
      default: false
    }

  },
  data () {
    return {
      visible: false,
      chooseform: {
        total: 100,
        selected: [],
        userList: []
      },
      isShowAllChoose: false,
      searchForm: {
        orgId: '',
        searchStr: ''
      },
      allChecked: false,
      indeterminate: false,
      breadCrumbArr: [],
      list: []
    }
  },
  watch: {

    list (val) {
      this.chooseform.selected.map(item => {
        val.map(ele => {
          if (item.id === ele.id) {
            ele.isChecked = true
          }
        })
      })
    }
  },
  mounted () {
    if (this.selceted.length > 0) {
      this.getSelected()
    }
  },
  methods: {
    // 全选
    changeAllChecked (e) {
      const value = e.target.checked
      this.list.map(item => {
        if (!item.isOrg && value) {
          item.isChecked = value
          if (!this.chooseform.selected.some(ele => ele.id === item.id)) {
            this.chooseform.selected.push(item)
          }
        }
        if (!item.isOrg && !value) {
          item.isChecked = value
          this.chooseform.selected = this.chooseform.selected.filter(ele => ele.id !== item.id)
        }
      })
    },
    // 单选
    chooseSingle (item, v) {
      if (v) {
        if (!this.chooseform.selected.some(ele => ele.id === item.id)) {
          this.chooseform.selected.push(item)
        }
      } else {
        this.chooseform.selected = this.chooseform.selected.filter(ele => ele.id !== item.id)
      }

      this.list.map(ele => {
        if (ele.id === item.id) {
          ele.isChecked = v
        }
      })
      const checkedLength = this.list.filter(ele => {
        return !ele.isOrg && ele.isChecked === true
      }).length

      switch (checkedLength) {
        case 0:
          this.allChecked = false
          this.indeterminate = false
          break
        case this.chooseform.userList.length:
          this.allChecked = true
          this.indeterminate = false
          break
        default:
          this.allChecked = false
          this.indeterminate = true
      }
    },

    // 删除选中的人员
    delChoose (item) {
      this.list.map(ele => {
        if (ele.id === item.id) {
          ele.isChecked = false
        }
      })
      this.chooseform.selected = this.chooseform.selected.filter(ele => ele.id !== item.id)
    },
    // 下一级
    next (item) {
      if (item.childCount > 0) {
        this.searchForm.orgId = item.id
        this.breadCrumbArr.push(item)
        this.getlistUserAndOrg()
      } else {
        this.$message.warning('没有下一级')
      }
    },
    breadChoose (item, index) {
      if (index === this.breadCrumbArr.length - 1) {
        return
      }
      if (index === 0) {
        this.searchForm.orgId = ''
      } else {
        this.searchForm.orgId = item.id
      }
      this.breadCrumbArr.splice(index + 1, this.breadCrumbArr.length - index - 1)
      this.getlistUserAndOrg()
    },
    onOk () {
      console.log(this.chooseform.selected)
      if (this.isRequired) {
        if (this.chooseform.selected.length === 0) {
          this.$warning({ title: '请选择人员' })
          return
        }
      }
      this.visible = false
      this.$emit('onOk', this.chooseform.selected)
    },
    // 获取组织 人员列表
    getlistUserAndOrg () {
      this.$http.post('/zg-system/user/listUserAndOrg', this.searchForm, data => {
        const orgList = data.orgList.map(item => {
            return {
              ...item,
              isOrg: true,
              disabled: true,
              isChecked: false
            }
        })
        const userList = data.userList.map(item => {
            return {
              ...item,
              isOrg: false,
              disabled: false,
              isChecked: false
            }
        })
        this.list = [...orgList, ...userList]
        this.chooseform.total = userList.length
        this.isShowAllChoose = userList.length > 0
        this.chooseform.userList = userList
      })
    },
    // 查询已选中人员
    getSelected () {
      this.$http.post('/zg-system/user/list', {
        userIds: this.selceted,
        searchStr: ''
      }, data => {
        this.chooseform.selected = data
      })
    },
    search () {
      this.getlistUserAndOrg()
    },
    open () {
      this.breadCrumbArr.push({ name: this.title, id: '-1' })
      this.getlistUserAndOrg()
      this.visible = true
    }
  }

}
</script>

<style scoped lang="scss">
.content{
  height:400px;
}
.width100{
  width: 100%;
  height:100%;
  h3{
    text-align: center;
  }
  ul{
    height:calc(100% - 100px);
    overflow-y: auto;
    li{
      height:40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      padding:10px;
      cursor: pointer;
      span{
        display: flex;
        align-items: center;
        i{
          color:#1890ff;
        }
      }
      span:nth-child(1){
        width:calc(100% - 50px);
      }

    }
    li:hover{
      background:#fcf6f6;
      border-radius: 10px;
    }

  }

}
.selected-list{
  padding:10px 0px;
  span{
    height:30px;
    line-height: 30px;
    padding:3px;
    border-radius: 5px;
    background:#1890ff;
    color:#fff;
    cursor: pointer;
    i{
      margin:0px 5px 0px 5px;
    }
  }
}
.mrg10{
  margin:0px 10px 0px 10px;
}
.divider{
  width:1px;
  height:100%;
  background:#fcf6f6;
  margin: 0px 10px 0px 10px;
}
</style>
